<template>
  <div class="head-line">
    <div class="submit-box body-cont">
      <AddressCard :addr="addressData" :readonly="true" />
      <div class="card-shadow">
        <div class="order-num">
          <span>订单号：<i class="order-no">{{order.subOrderNo || order.orderNo}}</i></span>
        </div>
        <ul>
          <!-- <li class="time">
            <span class="order-time">下单时间：{{order.createDate}}</span>
            <span class="server-time">服务开始时间：{{order.serviceDate}}</span>
          </li> -->
          <li v-if="order.serviceItem">
            <span class="type grey">服务对象：</span> {{order.serviceItem}}
          </li>
          <li v-if="order.phone">
            <span class="type grey">联系方式：</span> {{order.phone}}
          </li>
          <li>
            <span class="type grey">下单时间：</span> {{order.createDate}}
          </li>
          <li v-if="order.serviceDate">
            <span class="type grey">服务时间：</span> {{order.serviceDate}}
          </li>
          <li v-if="order.serviceDuration">
            <span v-if="order.serviceType === 'xsg'" class="flex-box" ><i class="type grey">服务时长：</i> {{order.serviceDuration}}小时</span>
            <span v-else-if="order.serviceType === 'ys'" class="flex-box" ><i class="type grey">服务时长：</i> {{order.serviceDuration}}天</span>
            <span v-else class="flex-box"><i class="type grey" >服务时长：</i> {{rangeData.serviceDuration[order.serviceDuration]}}</span>
          </li>
          <li>
            <span class="type grey">服务类型：</span> <span class="tips">{{serviceInfo[order.serviceType] && serviceInfo[order.serviceType].name}}</span>
          </li>
        </ul>
      </div>
      <div class="card-shadow">
        <ul class="baby-info">
          <li v-for="(item, index) in infoList" :key="index">
            <span class="type grey">{{item.name}}：</span> {{item.value}}
          </li>
          <!-- <li><span class="type grey">预产期：</span> 2018年11月28日</li> -->
          <!-- <li><span class="type grey">服务时长：</span> 50天</li> -->
          <li v-if="order.orderPrice"><span class="type grey">服务总价：</span> {{order.orderPrice}}元</li>
        </ul>
        <div v-if="order.remarks" class="note">
          <p class="dark font14">备注</p>
          <div class="grey font14">{{order.remarks}}</div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <view class="btn-full" @tap="goBack" >返回</view>
    </div>
  </div>
</template>
<script>
import getOrderDetail from '@/interface/order/getOrderDetail'
import getAddress from '@/interface/address/getAddress'
import AddressCard from '@/components/AddressCard/index'
import {rangeData, serviceTypeData, serviceInfo} from '@/config'

export default {
  components: { AddressCard },
  data(){
    return {
      rangeData,
      addressData: {},
      order: {},
      infoList: [],
      serviceInfo,
      serviceTypeData
    }
  },
  computed: {

  },
  methods: {
    getInfoList () {
      const obj = serviceInfo[this.order.serviceType].info
      if (!obj) return
      const list = Object.keys(obj).map(v => {
        let value = this.order[v] || '--'
        console.log(rangeData, v)
        if (rangeData[v]) {
          value = rangeData[v][this.order[v]]
        }
        switch (v) {
          case 'wastelandArea':
          case 'housingArea':
            value = value + '平米'
            break
          case 'servicePrice':
            value = value + '元'
            break
          case 'serviceFrequency':
            value = value + '次'
            break
          case 'demand':
            if (this.order[v]) {
              value = this.order[v].split(',').map(val => rangeData[v][val]).join(',')
            }
            break
          default:
            break
        }
        return {name: obj[v], value}
      })
      console.log(list)
      this.infoList = list
    },
    goBack () {
      this.navigateBack();
    }
  },
  beforeMount () {
    this.checkLogin()
  },
  mounted () {
    this.addressData = {}
    this.order = {}
    this.infoList = []

    const { id } = this.$root.$mp.query
    getOrderDetail({ id }).then(data => {
      this.order = data
      getAddress({addressId: data.addressId}).then(res => {
        this.addressData = res
      })
      this.getInfoList()
    })
  }
}
</script>

<style lang="less" >
 page {
  background: #f9f9f9;
  height: 100%;
}
.card-shadow {
  margin-bottom: 28upx;
  background: #fff;
}
.card-shadow .note {
  padding: 0upx 28upx 52upx;
  .dark{
    margin-bottom: 16upx;
  }
}
.order-num {
  height: 78upx;
  line-height: 78upx;
  border-bottom: 1upx solid #ddd;
  font-size: 24upx;
  color: #aaa;
  margin-left: 28upx;
}
.order-num .order-no {
  display: inline;
  color: #888;
}
.order-num .detail {
  float: right;
  color: #3186ff;
  margin-right: 33upx;
}
ul.baby-info {
  padding: 20upx 28upx 13upx;
}
ul {
  padding: 0 28upx 47upx;
}
ul li {
  font-size: 28upx;
  color: #333;
  margin: 20upx 0;
}
ul li .tips {
  display: inline-block;
  border-radius: 4upx;
  background-color: #fa4b70;
  height: 54upx;
  padding: 0 20upx;
  line-height: 54upx;
  text-align: center;
  color: #fff;
}
ul li.time {
  font-size: 24upx;
  color: #aaa;
  margin-bottom: 24upx;
}
ul li.time .order-time {
  margin-right: 100upx;
}
.btn-box {
  margin-top: -40upx;
}

</style>